<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../editor_md/css/editormd.css">
		<style>
			p {
				font-size: 16px;
				color: #303030;
			}
			html,
			body,
			.mui-content {
				background-color: #fff;
			}
			#header-content-line {
				border-bottom: solid #C8C7CC 1px;
				height: 5px;
				display: none;
				margin-bottom: 10px;
			}
			#topic-title {
				font-size: 20px;
				font-weight: bold;
			}
			#topic-content {
				padding-bottom: 20px;
			}
			.mui-content-padded {
				margin: 5px 5px 55px 5px;
			}
			.mui-bar {
				padding: 2px
			}
			#reply_input {
				width: 85%;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<div class="mui-content-padded" id="topic-content">
				<div id="topic-title"></div>
				<span id="topic-author"></span>&nbsp;<span id="topic-intime" style="display: inline-block; float: right;;"></span>
				<hr/>
				<textarea style="display: none;"></textarea>
			</div>
			<div class="mui-content-padded">
				<div style="background-color: #F6F6F6; height: 30px; padding: 5px 5px;">
					<span id="reply_count"></span>回复
				</div>
				<ul class="mui-table-view" id="reply_list"></ul>
			</div>
			<nav class="mui-bar mui-bar-footer mui-hidden" id="reply_nav">
				<input type="text" id="reply_input" placeholder="回复"/>
				<a href="javascript:submitReply()">提交</a>
			</nav>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/jquery.min.js"></script>
		<script src="../editor_md/lib/marked.min.js"></script>
		<script src="../editor_md/lib/prettify.min.js"></script>
		<script src="../editor_md/lib/raphael.min.js"></script>
		<script src="../editor_md/lib/underscore.min.js"></script>
		<script src="../editor_md/lib/sequence-diagram.min.js"></script>
		<script src="../editor_md/lib/flowchart.min.js"></script>
		<script src="../editor_md/lib/jquery.flowchart.min.js"></script>
		<script src="../editor_md/editormd.js"></script>
		<script src="../js/common.js"></script>

		<script charset="utf-8">
			mui.init({
				gestureConfig: {
					doubletap: true
				},
				swipeBack: true //启用右滑关闭功能
			});
			
			var topic, replies, parent, quote = "";
			mui.plusReady(function() {
				parent = plus.webview.currentWebview().opener();
				var tid = plus.storage.getItem(_topic_id);
				if(isLogin()) {
					document.getElementById("reply_nav").className = "mui-bar mui-bar-footer";
				}
				mui.ajax({
					type: "get",
					url: _baseUrl + "/api/topic/" + tid,
					data: {
						token: plus.storage.getItem(_user_token)
					},
					async: true,
					dataType: "json",
					success: function(data) {
						if(isLogin()) {
							if(data.detail.collect != null) {
								mui.fire(parent, "showStar");
								mui.fire(parent, "starFilled");
								mui.fire(parent, "collect");
							} else {
								mui.fire(parent, "showStar");
								mui.fire(parent, "notCollect");
							}
						}
						topic = data.detail.topic;
						$("#topic-author").html(topic.nickname);
						$("#topic-intime").html(formatDateTime(topic.in_time));
						$("#topic-title").html(topic.title);
						$("#reply_count").html(data.detail.replies.length);
						editormd.markdownToHTML("topic-content", {
							markdown: topic.content
						});
						var reply_list = $("#reply_list");
						reply_list.html("");
						mui.each(data.detail.replies, function(index, _data) {
							var in_time = formatDateTime(_data.in_time);
							var html = '<li class="mui-table-view-cell">'+
								'<div style="margin:-11px -15px;padding:8px 5px 8px 5px;">'+
								'<img class="mui-media-object mui-pull-left" src="' + _data.avatar + '">'+
								'<div>' + _data.nickname + '&nbsp;' + in_time + ''+
								'<p id="' + _data.id + '">'+
								'<textarea style="display:none;"></textarea>'+
								'</p></div></div>'+
								'</li>';
							reply_list.append(html);
							editormd.markdownToHTML(_data.id, {
								markdown: _data.content
							});
						});
						//关闭等待框
						plus.nativeUI.closeWaiting();
						//显示当前页面
						mui.currentWebview.show();
					}
				});
			});
			
			mui('#topic-content').on('tap', 'a', function() {
				var href=this.getAttribute("href");
				mui.openWindow({
					id: 'embed.html',
					url: 'embed.html',
					extras: {
						url: href
					}
				})
			});
			
			mui('#reply_list').on('tap', 'a', function() {
				var href=this.getAttribute("href");
				mui.openWindow({
					id: 'embed.html',
					url: 'embed.html',
					extras: {
						url: href
					}
				})
			});
			//敲击顶部导航，内容区回到顶部
			document.querySelector('header').addEventListener('doubletap', function() {
				plus.webview.getWebviewById('detail').evalJS('mui.scrollTo(0, 100)');
			});
			
			function submitReply() {
				var reply_input = $("#reply_input");
				var reply_list = $("#reply_list");
				if($.trim(reply_input.val()) == "") {
					mui.toast("回复内容不能为空");
				} else {
					mui.ajax({
						type: "post",
						url: _baseUrl + "/api/reply/create",
						data: {
							token: plus.storage.getItem(_user_token),
							tid: plus.storage.getItem(_topic_id),
							content: reply_input.val(),
							quote: quote
						},
						async: true,
						dataType: "json",
						success: function(data) {
							if(data.code == 200) {
								reply_input.val("");
								var _data = data.detail.reply;
								var in_time = formatDateTime(_data.in_time);
								var html = '<li class="mui-table-view-cell">'+
								'<div style="margin:-11px -15px;padding:8px 5px 8px 5px;">'+
								'<img class="mui-media-object mui-pull-left" src="' + data.detail.user.avatar + '">'+
								'<div>' + data.detail.user.nickname + '&nbsp;' + in_time + ''+
								'<p id="' + _data.id + '">'+
								'<textarea style="display:none;"></textarea>'+
								'</p></div></div>'+
								'</li>';
								reply_list.append(html);
								editormd.markdownToHTML(_data.id, {
									markdown: _data.content
								});
								mui.toast("回复成功");
							} else {
								mui.toast(data.description);
							}
						}
					})
				}
			}
			
		</script>
	</body>

</html>